<template>
  <div class="index" v-if="display">
    <index-nav></index-nav>
    <scroll class="scroll">
      <div class="content" slot="content">
        <banner></banner>
        <shop-list></shop-list>
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll.vue";

/* 子模块 */
import IndexNav from "./children/IndexNav.vue";
import Banner from "./children/Banner.vue";
import ShopList from "./children/ShopList.vue";
import { mapActions } from 'vuex';

export default {
  name: "Index",
  data() {
    return {
      display: false 
    };
  },
  components: {
    Scroll,
    IndexNav,
    Banner,
    ShopList,
  },
  async mounted () { // 相应的标注异步函数，await等待执行完
    await this.getGeohash() // 常使用await，能够讲异步的任务变成伪同步
    await this.getAddress()
    await this.getCategories()
    await this.getShops()
    this.display = true
  },
  methods: {
    ...mapActions([
      'getGeohash','getAddress',
      'getCategories','getShops'])
  }
};
</script>

<style lang="less" scoped>
.scroll {
  width: 94vw;
  margin: 0 auto;
  margin-top: 48px;
  // padding-top: 12px!important;
  height: calc(100vh - 48px - 49px);
}
</style>